﻿@page "/toasts"
@inject ToastService ToastService
@inject IJSRuntime JSRuntime

<h3>Toast 轻量弹窗</h3>

<h4>提供轻量级 Toast 弹窗</h4>

<p>组件使用介绍：</p>

<p class="code-label">1. 注入服务 <code>ToastService</code></p>
<Pre>@@inject ToastService ToastService</Pre>
<Pre>[Inject]
[NotNull]
private ToastService? ToastService { get; set; }
</Pre>
<p class="code-label">2. 调用其实例 <code>api</code></p>
<Pre>await ToastService.Success("Title", "Content", autoHide: true);</Pre>

<DemoBlock Title="基础用法" Introduction="用户操作时，右下角给予适当的提示信息" Name="Normal">
    <div class="row g-3 overflow-hidden">
        <div class="col-12 col-lg-6 col-xl-3">
            <ToastBox class="d-block" Options="@Options1" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <ToastBox class="d-block" Options="@Options2" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <ToastBox class="d-block" Options="@Options3" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <ToastBox class="d-block" Options="@Options4" />
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Success" Icon="fa fa-check-circle" OnClick="@OnSuccessClick" Text="成功通知"></Button>
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Danger" Icon="fa fa-times-circle" OnClick="@OnErrorClick" Text="失败通知"></Button>
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Info" Icon="fa fa-exclamation-circle" OnClick="@OnInfoClick" Text="信息通知"></Button>
        </div>
        <div class="col-12 col-lg-6 col-xl-3">
            <Button Color="Color.Warning" Icon="fa fa-exclamation-triangle" OnClick="@OnWarningClick" Text="警告通知"></Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Toast 手动关闭" Introduction="不会自动关闭，需要人工点击关闭按钮"  Name="Close">
    <Button Icon="fa fa-exclamation-triangle" OnClick="@OnNotAutoHideClick" Text="成功通知"></Button>
</DemoBlock>

<DemoBlock Title="Toast 显示位置" Introduction="提供设置 Toast 弹窗出现位置" Name="Position">
    <p>通过设置 <code>Toast</code> 组件的 <code>Placement</code> 值来设置弹窗出现的位置，默认值为 <code>BottomEnd</code> 除此之外的值均为右上角</p>
    <div class="row g-3">
        <div class="col-6 col-md-3">
            <Button OnClick="e => OnPlacementClick(Placement.TopEnd)">右上角</Button>
        </div>
        <div class="col-6 col-md-3">
            <Button OnClick="e => OnPlacementClick(Placement.BottomEnd)">右下角</Button>
        </div>
        <div class="col-6 col-md-3">
            <Button OnClick="e => OnPlacementClick(Placement.TopStart)">左上角</Button>
        </div>
        <div class="col-6 col-md-3">
            <Button OnClick="e => OnPlacementClick(Placement.BottomStart)">左下角</Button>
        </div>
    </div>
</DemoBlock>

<h4>特别注意</h4>

<p>本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用</p>

<p>注入服务提供以下几种快捷调用方法</p>

<ul class="ul-demo mb-3">
    <li>Success()</li>
    <li>Error()</li>
    <li>Information()</li>
    <li>Warning()</li>
</ul>

<p>示例如下：</p>

<Pre>ToastService?.Success("保存成功", "保存数据成功，4 秒后自动关闭");</Pre>

<Pre>private void OnInfoClick()
{
    ToastService.Show(new ToastOption()
    {
        // 通知类别
        Category = ToastCategory.Information,

        // 通知框 Title 值
        Title = "消息通知",

        // 通知正文内容
        Content = "系统增加新组件啦，4 秒后自动关闭"
    });
}
</Pre>

<Tips>特别说明: 可以通过 <code>BootstrapBlazorOptions</code> 全局统一配置参数可以设置整个系统内的 <code>Toast</code> 组件 <code>Delay</code> 参数值</Tips>

<p>通过配置文件 <code>appsetting.json</code> 文件配置，适用于 <code>Server-Side App</code></p>

<Pre>"BootstrapBlazorOptions": {
    "ToastDelay": 4000,
    "MessageDelay": 4000,
    "SwalDelay": 4000
}
</Pre>

<p>通过 <code>Startup</code> 文件中的 <code>ConfigureServices</code> 方法配置，适用于 <code>Server-Side App</code> 和 <code>WebAssembly App</code></p>

<Pre>public void ConfigureServices(IServiceCollection services)
{
    // 统一设置 Toast 组件自动消失时间
    services.Configure&lt;BootstrapBlazorOptions&gt;(options =>
    {
        options.ToastDelay = 4000;
    });
}
</Pre>

<div class="mb-3">或者，仅适用于 <code>Server-Side App</code></div>

<Pre>public void ConfigureServices(IServiceCollection services)
{
    // 增加 BootstrapBlazor 组件
    services.AddBootstrapBlazor(options =>
    {
        // 统一设置 Toast 组件自动消失时间
        options.ToastDelay = 4000;
    });
}
</Pre>

<AttributeTable Items="@GetAttributes()" />

